<!--评论页面&评论管理-->
<template>
  <div style="background-color:#fff;padding:10px ;">
    <span style="line-height:60px;font-size:20px; margin-left: 60px">{{ branchInfo.name}} 餐厅：顾客评论</span>
  </div>
  <!--    轮播图-->
  <el-carousel indicator-position="outside" style="padding: 20px 20px;height: 300px ">
    <el-carousel-item v-for="item in imgList" :key="item">
      <img :src="item" alt="" style="width: 100%; height: 100%"/>
    </el-carousel-item>
  </el-carousel>

  <el-card style="margin:20px;">
        <el-row gutter="20">
          <el-col span="12">
            <img :src="BASE_URL+branchInfo.imgUrl" width="500px"  style="margin-left: 60px"/>
          </el-col>
          <el-col span="10">
            <div class="branch_list">
              <p class="branch_list_p">
                <el-icon style="font-size: 21px;"><Shop/></el-icon>
                餐厅：{{branchInfo.name}}
              </p>
              <p class="branch_list_p">
                <el-icon style="font-size: 21px;"><ForkSpoon /></el-icon>
                营业时间：{{branchInfo.workTimeStart}} - {{branchInfo.workTimeEnd}}
              </p>

              <p class="branch_list_p">
                <el-icon style="font-size: 21px;"><LocationInformation /></el-icon>
                位置信息：{{branchInfo.address}}
              </p>
              <p class="branch_list_p">
                <el-icon style="font-size: 21px;"><Phone /></el-icon>
                联系电话：{{branchInfo.phone}}
              </p>
              <p class="branch_list_p">
                <el-icon style="font-size: 21px;"><Collection-tag /></el-icon>
                餐厅介绍：{{branchInfo.description}}
              </p>
            </div>
          </el-col>
        </el-row>
  </el-card>
  <el-card style="margin:20px;" v-for="item in branchInfo.commentVOList" >
    <div slot="header" >
      <el-icon style="font-size: 21px;"><User /></el-icon>
      <span>{{" 评论人:"+item.username}}</span>
<!--      根据评分回显 5个星星-->
      <el-rate v-model="item.score" disabled show-text text-color="#ff9900" style="margin-left: 40px"></el-rate>
      <span style="float: right; padding: 3px 0">{{"评论时间:"+item.createTime}}</span>
    </div>
    <div style="margin-top: 20px">
      <span style="font-size: 14px;color: #999;">{{"评论内容："+item.content}}</span>
    </div>
  </el-card>

</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import {useRoute} from "vue-router";

//获取当前登录的用户信息
const user = ref(getUser());

// 搜索条件
const searchForm = ref({
  branchId: '',
  status: '0'
})
//一进到页面就立即执行加载评论数据的方法
onMounted(()=>{
  const route = useRoute();
  searchForm.value.branchId = route.query.id;
  console.log(searchForm.value.branchId)
  loadCommentDate();
  getBranchs(branchOptions);

})
// 定义展示分店以及评论的对象
const branchInfo= ref({});
// 定义加载评论数据的方法
const loadCommentDate = ()=> {
  // 获取当前用户所在的分店id，从路径参数中获取
  //searchForm.value.branchId = new URLSearchParams(window.location.search).get('id');


  console.log("11"+searchForm.value.branchId);
  let date =qs.stringify(searchForm.value);
  axios.get(BASE_URL+'/v1/branch/selectBranchComment?'+date)
  .then((response)=>{
    if(response.data.code===2000){
      branchInfo.value=response.data.data;
      console.log(branchInfo.value)
    }else{
      ElMessage.error(response.data.msg);
    }
  })

}
// 定义保存餐厅数据的数组
const branchOptions = ref([]);

// 定义一个图片数组，进行轮播
const imgList = ref([
  "/imgs/carousel/img1.png",
  "/imgs/carousel/img2.png",
  "/imgs/carousel/img3.png",
  "/imgs/carousel/img4.png",
])




</script>

<style scoped>
.branch_list{
  //width: 400px;
  //height: 500px;
  border-bottom-style: dashed;
  border-width: 0;
  cursor:pointer;
}
.branch_list_p{
  font-size: 14px;
  color: #666;
  margin-top: 50px;
  margin-left: 40px;
  overflow: hidden;
  text-overflow: ellipsis;

}

</style>